<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>119_map</title>
		<script>
			/* 
			Map
				- Map用来存储键值对结构的数据(key-value);
				- Object中存储的数据就可以认为是一种键值对结构;
				-Map和Object的主要区别:
					- 0bject中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，
						JS解释器会自动将其转换为字符串。
					- Map中任何类型的值都可以称为数据的key。
			
			
			属性和方法:
				map.size() 获取map中键值对的数量
				map.set(key,value)向map中添加键值对
				map.get(key)根据key获取值
				map.delete(key)删除指定数据
				map.has(key) 检查map中是否包含指定键
				map.clear()删除全部的键值对
			 */
			const obj2 = {}
			const obj = {
				name: "孙悟空",
				age: 181, //name,age只是省略了双引号
				[Symbol()]: "哈哈哈", //或符号
				//{name: '孙悟空', age: 181, [object Object]: '嘻嘻', Symbol(): '哈哈哈'}
				//嘻嘻名字是[object Object]，所以对象会自动转换为这个[object Object]
				[obj2]: "嘻嘻" //
			}
			//取出嘻嘻
			console.log(obj[obj2]); //这样可以取出嘻嘻，直接传一个匿名对象也能取出嘻嘻。
			/* 照样能取出嘻嘻。
			因为obj[obj2]或者obj[{}]转换为字符串都是这个东西：[object Object]
			 */
			console.log(obj[{}]);
			console.log(obj);


			//创建一个map
			const map = new Map();
			map.set("name", "孙悟");
			map.set("age", 18)

			let name = map.get("name");
			console.log(map);

			//将map转为数组
			let arr = Array.from(map) //转换的为二维数组:[["name","孙悟空"]，["age",18]]
			//如果map中的key是对象，转为数组后为[["name","孙悟空"]，["age",18],[{},"呵呵"]]
			map.set({}, "呵呵"); //[["name","孙悟空"],["age",18],[{},"呵呵"]]
			console.log("arr", arr);
			//使用展开运算符将map转为数组
			arr = [...map]

			//二维数组转map
			const map2 = new Map([
				["name", "孙悟空"],
				["age", 28],
				[{}, "呵呵对象"]
			])
			console.log(map2); //Map(3) {'name' => '孙悟空', 'age' => 18, {…} => '呵呵'}

			//遍历map
			for (const entry of map2) {
				//entry就是一维数组['name', '孙悟']
				const [key, value] = entry; //'name' '孙悟空'
				console.log(entry, key, value);
			}
			//或者
			for (const [key, value] of map2) {

			}
			//或者使用foreach
			map.forEach((key, value, c) => {
				//孙悟 name Map(3) {'name' => '孙悟', 'age' => 18, {…} => '呵呵'}
				console.log(key, value, c);//c就是map
			})
			
			/*
			 map.keys() - 获取map的所有的key
			 map.values() -获取map的所有的value
			 map.entries();获取map的所有的迭代器。
			 */
		</script>
	</head>
	<body>
	</body>
</html>